<template>
  <div id="result">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>
    <!-- 搜索 -->
    <Search :searchKey="words"></Search>
    <!-- 主体内容 -->
    <div class="main" id="pageBody">
      <!-- 面包屑 -->
      <div class="crumbs">
        <router-link to="/help">{{lang.footHelpCenter}}</router-link><i>&gt;</i>
        <span v-text="lang.helpSearchResults"></span>
      </div>
      <div class="keyword-num">
        <div class="title">
          <font v-text="lang.helpSearchResults"></font>
          <div class="feedback-btn">
            <span v-text="lang.helpLinkToFeedback"></span>
            <router-link to="/help/feedback" v-text="lang.helpDetailFootBtn"></router-link>
          </div>
        </div>
        <div v-if="words!==''" class="search-keywords" v-text="lang && (lang['helpSearchNum'].replace('{keywords}', words)).replace('{count}', resultList.length)"></div>
      </div>
      <!-- 搜索结果列表 -->
      <div class="list">
        <div class="item" v-for="item in resultList">
          <a href="#" @click="toJump('hdetail', item.ID)">{{item.Title}}</a>
          <div class="crumbs">
            <router-link to="/help">{{lang.footHelpCenter}}</router-link> >
            <span v-text="item.Title"></span>
          </div>
          <div class="time">IDCM <span v-text="item.ReleaseTime"></span></div>
          <div class="text" v-html="item.Introduction"></div>
        </div>
      </div>
      <!-- 页码 -->
      <div class="page">
        <SwPaging
        :total="total"
        :pageSize="pageSize"
        :pageRange="pageRange"
        :pageIndex="pageIndex"
        :lang="lang"
        @jumpPage="jumpPage"></SwPaging>
      </div>
    </div>
    <!-- 页尾 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'
import Search from './search.vue'
import SwPaging from '@/components/SwPaging/index.vue'
import {mapActions} from 'vuex'

export default {
  mixins: [commonMixins],
  data () {
    return {
      pageIndex: 1,   // 当前页
      pageSize: 10,   // 每页多少条
      pageRange: 7,   // 页码条范围，例如8就是显示1-7的页码条
      total: 0,
      words: '',
      keywords: '',
      resultList: []
    }
  },
  components: {
    Search,
    SwPaging
  },
  watch: {
    '$route' () {
      this.keywords = this.$route.query.keywords
      this.getSearchResult()
    },
    langKey () {
      let lk = window.localStorage.getItem('langKey')
      this.langkey = lk === 'zh-CN' ? 'zh-CN' : 'en'
      this.getSearchResult()
    }
  },
  methods: {
    ...mapActions([ 'switchLang' ]),
    init () {
      var self = this
      if (window.localStorage) {
        var lkey = window.localStorage.getItem('langKey')
        if (lkey) {
          self.langkey = lkey === 'zh-CN' ? 'zh-CN' : 'en'
        } else {
          self.langkey = 'zh-CN'
          window.localStorage.setItem('langKey', self.langkey)
        }
      }
    },
    // 获取搜索结果列表
    getSearchResult (no) {
      this.resultList = []
      this.$http.post('Helps/SearchList', {
        pageIndex: no - 1 || this.pageIndex - 1,
        pageSize: this.pageSize || 10,
        Keywords: this.keywords.replace(/(^\s*)|(\s*$)/g, ''),
        LanguageType: this.langkey
      }).then((res) => {
        this.words = this.keywords
        this.resultList = res.Data || []
        this.total = res.TotalItem
      })
    },
    // 页码切换
    jumpPage (no) {
      this.getSearchResult(no)
    },
    // 带参跳转详情页
    toJump (name, id) {
      this.$router.push({
        name: name,
        params: {
          id: id
        }
      })
    }
  },
  mounted () {
    this.init()
    this.keywords = this.$route.query.keywords // || sessionStorage.keywords
    this.getSearchResult()
    // console.log(this.keywords)
  }
}
</script>

<style lang="less">
  #result{
    color: #fff;

    .main {
      width: 1000px;
      margin: 0 auto;

      .crumbs {
        margin: 30px 0;
        a, i {
          color: #3782FF;

          &:hover {
            color: #3782FF;
            text-decoration: underline;
          }
        }
      }

      .keyword-num {
        padding: 20px;
        background-color: #191E2A;
        box-sizing: border-box;

        .title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          font {
            font-size: 18px;
          }
          .feedback-btn {
            a {
              color: #3782FF;
            }
          }
        }

        .search-keywords {
          margin-top: 20px;
          font-size: 18px;
        }
      }

      .list {
        margin-bottom: 30px;
        .item {
          margin-top: 30px;
          padding-bottom: 30px;
          border-bottom: 1px solid #3A3F4A;
          box-sizing: border-box;

          a {
            color: #3782FF;
          }
          .crumbs {
            margin: 20px 0;
            a {
              color: #fff;
            }
          }
          .text {
            margin-top: 20px;

            p {
              line-height: 22px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              padding: 0;
            }
            p:nth-child(n+2) {
              display: none;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width:1200px){
    .crumbs, .keyword-num, .list, .page {
      width: 900px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .crumbs {
      margin: 30px auto!important;
    }
    .main {
      width: 900px!important;
    }
  }
  @media screen and (max-width:1000px){
    .crumbs, .keyword-num, .list, .page {
      width: 760px;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .crumbs {
      margin: 30px auto!important;
    }
    .main {
      width: 760px!important;
    }
  }
</style>
